<template>
    <!-- 统一导入结果组件 -->
    <div class="importResult">
        <a-modal
            @cancel="$emit('close')"
            :width="width"
            :footer="null"
            :maskClosable="false"
            :visible="isResultModal"
            title="导入结果"
        >
            <div class="importResult-content">
                <div class="topContent">
                    <p class="title">
                        <a-icon class="icon" type="close-circle" />
                        <span>{{ title }}</span>
                    </p>
                    <span class="desc">
                        失败
                        <span style="color:#E51400">{{ resultTotal }}条</span>信息，失败原因查看如下详情数据
                    </span>
                </div>
                <div class="bomContent">
                    <a-table
                        :columns="columns"
                        :data-source="dataSource"
                        :pagination="false"
                        bordered
                        rowKey="id"
                    >
                        <span
                            :title="`失败：${record.errorMsg}`"
                            slot="action"
                            slot-scope="text, record"
                            href="javascript:;"
                        >
                            <span style="color:#E51400">失败：</span>
                            <span>{{ record.errorMsg }}</span>
                        </span>
                    </a-table>
                    <a-pagination
                        style="text-align: right;margin-top: 15px;"
                        :current="current"
                        :total="resultTotal"
                        @change="resultPageChange"
                        show-less-items
                    />
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script>
export default {
    props: {
        width: {
            Type: Number,
            default: 1200
        },
        title: {
            type: String,
            default: '导入完成'
        },
        isResultModal: Boolean,
        resultTotal: Number,
        columns: Array,
        dataSource: Array,
        current: Number,
    },
    methods: {
        resultPageChange(index) {
            this.$emit('pageChange', index)
        },
        pageNoChange(array, index) {
            this.$emit('pageNoChange', array.slice(10 * index - 10, 10 * index))
        }
    }
}
</script>
<style lang="less" scoped>
.importResult {
    &-content {
        // background: red;
        .topContent {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p {
                margin: 0;
            }
            .title {
                font-size: 20px;
                font-weight: bold;
                display: flex;
                align-items: center;
                .icon {
                    color: #f73729;
                    margin-right: 10px;
                    font-size: 20px;
                }
            }
            .desc {
                margin-bottom: 20px;
            }
        }
    }
}
</style>